<template>
	<view class="container">
		<u-cell-group title="音效设置">
			<u-cell-item title="好友消息音效" :arrow="false" hover-class="none"><u-switch active-color="#F85962" slot="right-icon" v-model="chatSingleSound" :active-value="true" :inactive-value="false" @change="changeSignleSound"></u-switch></u-cell-item>
			<u-cell-item title="群聊音效" :arrow="false" hover-class="none"><u-switch active-color="#F85962" slot="right-icon" v-model="chatGroupSound" :active-value="true" :inactive-value="false" @change="changeGroupSound"></u-switch></u-cell-item>
		</u-cell-group>
		<u-cell-group title="通知设置" :arrow="false">
			<u-cell-item title="接受消息推送" :arrow="false" hover-class="none"><u-switch active-color="#F85962" active-value="1" inactive-value="0" slot="right-icon" v-model="pushStatus" @change="changePushStatus" :loading="pushLoading"></u-switch></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { updateMemberSetting } from '@/store/dispatches.js';
export default {
	data() {
		return {
			pushStatus: false,
			pushLoading: false,
			chatSingleSound: false,
			chatGroupSound: false
		};
	},
	computed: {
		...mapState({
			setting: state => state.user.setting
		})
	},
	onShow() {},
	onLoad() {
		this.pushStatus = !!this.userInfo.push_status;
		this.chatSingleSound = this.setting.chatSingleSound;
		this.chatGroupSound = this.setting.chatGroupSound;
		this.refreshUserInfo();
	},
	methods: {
		completeUserInfo(data) {
			this.pushStatus = !!data.push_status;
		},
		changeSignleSound(value) {
			updateMemberSetting({ chatSingleSound: value });
		},
		changeGroupSound(value) {
			updateMemberSetting({ chatGroupSound: value });
		},
		async changePushStatus(value) {
			this.pushLoading = true;
			setTimeout(async () => {
				await this.$u.api.saveScopeSetting({ push_status: Number(this.pushStatus) }).catch(e => {
					this.pushStatus = !this.pushStatus;
				});
				this.pushLoading = false;
			}, 500);
		}
	}
};
</script>

<style></style>
